<script setup>
import {ref} from "vue";
import request9191 from "../../../utils/request9191.js";
import {datePickerProps, ElMessage, ElMessageBox, extractDateFormat} from "element-plus";
import {Delete} from "@element-plus/icons-vue";
const dialogFormVisible = ref(false)
const formLabelWidth = "140px"

const clubActivityData=ref()

const clubActivity=ref({
    actName:'',
    actSummarize:'',
    actParticulars:'',
    actPeople:'',
    actTime:'',
    actClub: sessionStorage.getItem("club"),
    actAsk:'',
    actBeginTime:'',
    status:''
})

//获取本社团的活动
const getClubActivity = () =>{
  if (sessionStorage.getItem("name") === null){
    ElMessage.error("请登录")
    return
  }
  request9191({
    url: '/clubActivity/getByActClub',
    method: 'get',
    params:{
      actClub:sessionStorage.getItem("club")
    }
  }).then((res)=>{
    clubActivityData.value = res.data.data
  })
}

//团长发布社团活动
const AddClubActivity = () =>{
  if (sessionStorage.getItem("name") === null){
    ElMessage.error("请登录")
    return
  }
  if ((clubActivity.value.actName === null || clubActivity.value.actName === '') ||
      (clubActivity.value.actSummarize === null || clubActivity.value.actSummarize === '') ||
      (clubActivity.value.actParticulars === null || clubActivity.value.actParticulars === '') ||
      (clubActivity.value.actPeople === null || clubActivity.value.actPeople === '') ||
      (clubActivity.value.actTime === null || clubActivity.value.actTime === '') ||
      (clubActivity.value.actClub === null || clubActivity.value.actClub === '') ||
      (clubActivity.value.actAsk === null || clubActivity.value.actAsk === '') ||
      (clubActivity.value.actBeginTime === null || clubActivity.value.actBeginTime === '')){
    ElMessage.error("请填写完整")
    return
  }
      request9191({
        url:'/clubActivity/addActivity',
        method:'post',
        data:{
          actName:clubActivity.value.actName,
          actSummarize:clubActivity.value.actSummarize,
          actParticulars:clubActivity.value.actParticulars,
          actPeople:clubActivity.value.actPeople,
          actTime:clubActivity.value.actTime,
          actClub:clubActivity.value.actClub,
          actAsk:clubActivity.value.actAsk,
          actBeginTime:clubActivity.value.actBeginTime,
        }
      }).then((res) =>{
        ElMessage.success("提交成功")
        clearAddActivity()
        dialogFormVisible.value=false;
        getClubActivity()
      })
}

//发布活动校验
const AddClubActivityRules = ref({
  actName:[
    {required: true, message: '请输入活动名称' , trigger: 'blur'}
  ],
  actSummarize:[
    {required: true, message: '请输入活动概述' , trigger: 'blur'}
  ],
  actParticulars:[
    {required: true, message: '请输入活动详情' , trigger: 'blur'}
  ],
  actPeople:[
    {required: true, message: '请输入活动人数' , trigger: 'blur'}
  ],
  actTime:[
    {required: true, message: '请输入报名开始时间' , trigger: 'blur'}
  ],
  actAsk:[
    {required: true, message: '请输入活动要求' , trigger: 'blur'}
  ],
  actBeginTime:[
    {required: true, message: '请输入活动开始时间' , trigger: 'blur'}
  ],
})

//清空数据
const clearAddActivity=()=>{
  clubActivity.value.actName=''
  clubActivity.value.actSummarize=''
  clubActivity.value.actParticulars=''
  clubActivity.value.actPeople=''
  clubActivity.value.actTime=''
  clubActivity.value.actClub=''
  clubActivity.value.actAsk=''
  clubActivity.value.actBeginTime=''
}

//发布社团活动取消
const cancel = () =>{
  ElMessage.info("您已取消")
  clearAddActivity();
  dialogFormVisible.value=false;
}


//打开修改弹框
const xiuGai = ref(false)
//修改活动信息
const update = ref({
  id:'',
  actName:'',
  actSummarize:'',
  actParticulars:'',
  actPeople:'',
  actTime:'',
  actClub:sessionStorage.getItem("club"),
  actAsk:'',
  actBeginTime:''
})
//修改活动信息
const updateClubActivity = () =>{
      request9191({
        url: '/clubActivity/update',
        method:'put',
        data: {
          id:update.value.id,
          actName:update.value.actName,
          actSummarize:update.value.actSummarize,
          actParticulars:update.value.actParticulars,
          actPeople:update.value.actPeople,
          actTime:update.value.actTime,
          actClub:update.value.actClub,
          actAsk:update.value.actAsk,
          actBeginTime:update.value.actBeginTime
        }
      }).then((res)=>{
        ElMessage.success("修改成功")
        getClubActivity()
        xiuGai.value=false
      })
}

//获取本行数据
const getRowActivity = (row) =>{
  update.value.id=row.id
  update.value.actName = row.actName
  update.value.actSummarize = row.actSummarize
  update.value.actParticulars = row.actParticulars
  update.value.actPeople = row.actPeople
  update.value.actTime = row.actTime
  update.value.actClub = row.actClub
  update.value.actAsk = row.actAsk
  update.value.actBeginTime = row.actBeginTime
}

//团长删除活动
const DeleteActivity = (id) => {
  ElMessageBox.confirm(
      '确认删除该条活动?',
      '温馨提示',
      {
        confirmButtonText:'确认',
        cancelButtonText:'取消',
        type:'warning'
      }
  )
      .then(()=>{
        request9191({
          url:'clubActivity',
          method:'delete',
          params:{
            id:id
          }
        }).then(() =>{
          ElMessage.success('删除成功')
          getClubActivity()
        })
      }).catch(() =>{
    ElMessage({
      type:'info',
      message:'已取消'
    })
  })
}

getClubActivity()
</script>

<template>



  <div class="MyActivity">
    <div class="header_top">
      <el-button plain @click="dialogFormVisible = true" type="primary">
        发布活动
      </el-button>
    </div>
    <div class="clubActivity">
      <el-table :data="clubActivityData" >
        <el-table-column prop="actName" label="活动名称"/>
        <el-table-column prop="actSummarize" label="活动概述"/>
        <el-table-column prop="actParticulars" label="活动详情"/>
        <el-table-column prop="actPeople" label="活动人数"/>
        <el-table-column prop="actTime" label="报名开始时间"/>
        <el-table-column prop="actClub" label="发布社团"/>
        <el-table-column prop="actAsk" label="活动要求"/>
        <el-table-column prop="actBeginTime" label="活动开始时间"/>
        <el-table-column label="状态" width="100px">
          <template #default="scope">
            <el-tag v-if="scope.row.status === 0" type="warning">待审核</el-tag>
            <el-tag v-else-if="scope.row.status === 1" type="success">已通过</el-tag>
            <el-tag v-else type="danger">已驳回</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="250px">
          <template #default="scope">
            <el-button type="info" @click="xiuGai = true ; getRowActivity(scope.row)">修改活动信息</el-button>
            <el-button size="default" type="danger" @click="DeleteActivity(scope.row.id)">
              <el-icon><Delete /></el-icon>
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>



  <!--发布活动弹框-->
  <el-dialog v-model="dialogFormVisible" title="填写活动信息" width="500" center>
    <el-form :model="clubActivity" :rules="AddClubActivityRules">
      <el-form-item label="活动名称" :label-width="formLabelWidth" prop="actName">
        <el-input v-model="clubActivity.actName" autocomplete="off" />
      </el-form-item>
      <el-form-item label="活动概述" :label-width="formLabelWidth" prop="actSummarize">
        <el-input v-model="clubActivity.actSummarize" autocomplete="off" />
      </el-form-item>
      <el-form-item label="活动详情" :label-width="formLabelWidth" prop="actParticulars">
        <el-input v-model="clubActivity.actParticulars" autocomplete="off" />
      </el-form-item>
      <el-form-item label="活动人数" :label-width="formLabelWidth" prop="actPeople">
        <el-input v-model="clubActivity.actPeople" autocomplete="off" />
      </el-form-item>
      <el-form-item label="活动要求" :label-width="formLabelWidth" prop="actAsk">
        <el-input v-model="clubActivity.actAsk" autocomplete="off" />
      </el-form-item>
      <el-form-item label="报名开始时间" :label-width="formLabelWidth" prop="actTime">
        <el-date-picker v-model="clubActivity.actTime" type="datetime" placeholder="请选择报名时间" ></el-date-picker>
      </el-form-item>
      <el-form-item label="发布社团" :label-width="formLabelWidth" prop="actClub">
          <el-input v-model="clubActivity.actClub" disabled autocomplete="off" />
      </el-form-item>

      <el-form-item label="活动开始时间" :label-width="formLabelWidth" prop="actBeginTime">
        <el-date-picker v-model="clubActivity.actBeginTime" type="datetime" placeholder="请选择活动开始时间"></el-date-picker>
      </el-form-item>

    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="cancel()">取消</el-button>
        <el-button type="primary" @click="AddClubActivity()">
          确认
        </el-button>
      </div>
    </template>
  </el-dialog>


  <!--修改活动信息弹框-->
  <el-dialog v-model="xiuGai" title="修改活动信息" width="500" center>
    <el-form :model="update" :rules="AddClubActivityRules">
      <el-form-item label="活动名称" :label-width="formLabelWidth" prop="actName">
        <el-input v-model="update.actName" autocomplete="off" />
      </el-form-item>
      <el-form-item label="活动概述" :label-width="formLabelWidth" prop="actSummarize">
        <el-input v-model="update.actSummarize" autocomplete="off" />
      </el-form-item>
      <el-form-item label="活动详情" :label-width="formLabelWidth" prop="actParticulars">
        <el-input v-model="update.actParticulars" autocomplete="off" />
      </el-form-item>
      <el-form-item label="活动人数" :label-width="formLabelWidth" prop="actPeople">
        <el-input v-model="update.actPeople" autocomplete="off" />
      </el-form-item>
      <el-form-item label="报名开始时间" :label-width="formLabelWidth" prop="actTime">
        <el-date-picker v-model="update.actTime" type="datetime" placeholder="请选择报名时间" ></el-date-picker>
      </el-form-item>

      <el-form-item label="发布社团" :label-width="formLabelWidth" prop="actClub">
        <el-input v-model="update.actClub" disabled autocomplete="off" />
      </el-form-item>

      <el-form-item label="活动要求" :label-width="formLabelWidth" prop="actAsk">
        <el-input v-model="update.actAsk" autocomplete="off" />
      </el-form-item>
      <el-form-item label="活动开始时间" :label-width="formLabelWidth" prop="actBeginTime">
        <el-date-picker v-model="update.actBeginTime" type="datetime" placeholder="请选择活动开始时间"></el-date-picker>
      </el-form-item>
    </el-form>
    <div class="dialog-footer" style="text-align: center">
      <el-button @click="cancel()">取消</el-button>
      <el-button type="success" @click="updateClubActivity()">
        修改
      </el-button>
    </div>
  </el-dialog>



</template>

<style scoped>
.header_top{
  margin-bottom: 20px;
}
</style>